<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建div,存放图标 -->
    <div style="width: 600px; height: 400px;"></div>
    <!-- 引入echarts插件 -->
    <script src="./lib/echarts.min.js"></script>


    <script>
        // 创建对象，初始化echarts
        let myChart = echarts.init(document.querySelector('div'))
        // 图标配置项
        let option = {
            // 标题
            title: {

                text: '我的折线图图',
                left: 'center'
            },
            // 网格大小
            grid: {
                top: 150,
            },
            // X轴坐标
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
                axisLabel: {
                    color: 'red',
                }
            },
            // Y轴坐标
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: 'red',
                    },
                },
            },
            // 数据
            series: [

                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line',
                    name: '销售额'
                },
                {
                    data: [158, 236, 254, 212, 134, 247, 230],
                    type: 'bar',
                    name: '赚的钱'
                },
                {
                    data: [159, 233, 224, 118, 235, 122, 299],
                    type: 'bar',
                    name: '卖的货'
                }
            ],
            // 表格图例提示
            legend: {
                top: 80
            },
            // 颜色
            color: ['red', {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'orange' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'red' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
            ],
            // 鼠标提示
            tooltip:{
                trigger:'axis'
            }



        };
        // 创建出表使用
        myChart.setOption(option)
    </script>
</body>

</html>